import { useState, useEffect, useRef } from "react";
import { observer } from "Mobx-react";
import { Modal, Table, Button } from "antd";
import type { ColumnsType } from "antd/es/table";
import { questionnaire } from "@/stores/questionnaire";
import { modalState } from "@/stores/modalState";
import type { optionType, controlOptionType, controlLogicType } from "@/types/index";
import ConcernSelect from "./ConcernSelect";
import { OptionContent } from "../stye";

interface optionControlType extends optionType {
  control?: controlLogicType;
}

function ConcernOption({ optionChange }: { optionChange: (optionLogic: controlOptionType) => void }) {
  const isOption = modalState.isOption;
  const concernRef = useRef<any>(null);

  const [optionData, setOption] = useState<optionControlType[]>([]);
  const [controlId, setControlId] = useState<number | null>(null);

  const columns: ColumnsType<optionControlType> = [
    {
      title: "当前选项",
      dataIndex: "content",
      width: "20%"
    },
    {
      title: "选项值",
      dataIndex: "id",
      width: "80%",
      render: (_, record, index) => (
        <>
          {controlId !== record.id ? (
            <div className="option-condition align-items flex-between">
              <div className="option-control">{questionnaire.logicText(record.control)}</div>
              <Button type="link" size="large" onClick={() => controlSet(record.id)}>
                {record.control ? "修改" : "添加关联"}
              </Button>
            </div>
          ) : (
            <div className="option-condition">
              <div className="option-button">
                <ConcernSelect childId={modalState.id} optionId={record.id} showAdd={false} ref={concernRef}></ConcernSelect>
                <Button type="primary" size="small" onClick={() => determineConcern(index)}>
                  确定
                </Button>
                <Button type="primary" size="small" danger style={{ marginLeft: 10 }} onClick={() => deleteConcern(index)}>
                  删除关联
                </Button>
              </div>
            </div>
          )}
        </>
      )
    }
  ];

  //关联设置
  const controlSet = (id: number) => {
    setControlId(id);
  };

  //确定关联
  const determineConcern = (index: number) => {
    const concern = concernRef.current.getConcern();
    if (concern.parentAnswer) {
      optionData[index].control = concern;
    } else {
      optionData[index].control = undefined;
    }
    setOption(optionData);
    setControlId(null);
  };
  //删除关联
  const deleteConcern = (index: number) => {
    optionData[index].control = undefined;
    setOption(optionData);
    setControlId(null);
  };

  useEffect(() => {
    setOption(modalState.option);
  }, [isOption]);

  const handleCancel = (e: any) => {
    if (e.target.className != "ant-modal-wrap") modalState.isOption = false;
  };
  const handleOk = () => {
    const control = optionData.flatMap(item => {
      return item.control ? item.control : [];
    });
    const optionLogic: controlOptionType = {
      questionId: modalState.id,
      control: control
    };
    setControlId(null);
    modalState.isOption = false;
    optionChange(optionLogic);
  };
  return (
    <Modal open={modalState.isOption} title="选项关联" width="800px" onCancel={handleCancel} onOk={handleOk}>
      <OptionContent>
        <p className="option-title">{modalState.title}</p>
        <Table dataSource={optionData} columns={columns} pagination={false} rowKey="id" bordered></Table>
      </OptionContent>
    </Modal>
  );
}

export default observer(ConcernOption);
